<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon
      :showSearch="false"
      :showAdd="false"
      @search="initData"
      @add="editDI"
    >
      <template #condition>
        <div class="condition-item">
          <!-- <label>纪委组</label> -->
          <el-input
            v-model="queryParams.dept_name"
            placeholder="按纪委组名称筛选"
            clearable=""
            @input="filterDI"
          >
          </el-input>
        </div>
      </template>
    </OperateCommon>
    <div class="table-wrapper">
      <el-table :data="tableData" border stripe>
        <el-table-column
          v-for="(col, index) in columns"
          :prop="col.prop"
          :key="index"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth"
        >
        </el-table-column>
        <el-table-column label="监管部门" align="left" min-width="500">
          <template slot-scope="scope">
            <div v-if="!scope.row.children">暂无数据</div>
            <div v-if="scope.row.children">
              <el-tag
                class="di-tag"
                v-for="item in scope.row.children"
                :key="item.id"
                type="info"
                size="large"
                effect="dark"
                :closable="true"
                @close="deleteConfirm(scope.row, item)"
              >
                {{ item.dept_name }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" size="mini" @click="editDI(scope.row)"
                >编辑</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EditDialog
      :visible.sync="visible"
      :parentDept="diData"
      :deptTree="deptTree"
      :currentPID="current.pid"
      :currentCID="current.cid"
      @refresh="initData"
    >
    </EditDialog>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import LinkTo from "@/mixins/LinkTo";
import { deleteDI, getDIList } from "@/api/System/DITeam";
import EditDialog from "./Edit.vue";
import { getDeptTree } from "@/api/System/Department";

import commonList from "@/mixins/commonList";
export default {
  mixins: [LinkTo, commonList],
  components: { OperateCommon, EditDialog },
  data() {
    return {
      columns: columns,
      originData: [],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        parent_id: "",
        dept_name: "",
      },
      expands: [],
      visible: false,
      diData: [],
      deptTree: [],
      current: {
        pid: "",
        cid: "",
      },
    };
  },
  methods: {
    initData() {
      getDIList().then((res) => {
        if (res.code == 0) {
          this.originData = res.data;

          this.tableData = JSON.parse(JSON.stringify(this.originData));

          this.diData = this.originData;
        }
      });
    },
    initDept() {
      getDeptTree().then((res) => {
        if (res.code == 0) {
          this.deptTree = res.data;
        }
      });
    },
    filterDI(val) {
      this.tableData = this.originData.filter((i) => {
        return i.dept_name.indexOf(val.trim()) > -1;
      });
    },
    pageChange(val) {
      this.queryParams.pageNum = val.pageNum;
      this.queryParams.pageSize = val.pageSize;
      this.initData();
    },
    deleteConfirm(p, c) {
      this.$confirm(
        `该操作将取消关联 【${p.dept_name}】 —— 【${c.dept_name}】, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteItem(c.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteItem(id) {
      deleteDI({ id: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.initData();
        }
      });
    },
    editDI(val) {
      this.visible = true;

      this.current.pid = val.dept_id;
      this.current.cid = "";
    },
  },
  created() {
    this.initDept();
    this.initData();
  },
};

const columns = [
  {
    prop: "dept_name",
    label: "纪检组",
    width: "400",
    minWidth: "",
    align: "",
  },
];
</script>

<style lang="scss" scoped>
.di-tag {
  margin: 5px 10px 5px 0;
}
</style>